<!--显示已有的服务-->
<h3>拖动相应的服务名称，改变该服务在首页的位置，点击“保存”按钮保存设置。</h3>
<h3>点击相应的服务名称，进行详细设置。</h3>
<p>
	 <div id="save_this_layout">保存</div>
</p>
<div id="product_class">
<?php
foreach( $product_classes as $index=>$procuct_class ){
?>
<div class="product_class_item<?php	
if( !$procuct_class['show'] ){
	 echo " notvisible ";
}?>">
	 <div class="delete"></div>
	 <div class="toggle"></div>
	 <div class="edit"></div>
	 <span class="product_class_name"><?php echo $procuct_class['product_class_name']; ?></span>	 
	 <span class="product_class_name_cn"><?php echo $procuct_class['product_class_name_cn']; ?></span>
</div>
<?php
}
?>

<!--弹出的对话框-->
<div id="dialog_message"></div>
</div>

<script type="text/javascript">
(function(){
	$( "#product_class" ).sortable();
	$( "#product_class" ).disableSelection();
	$( "#save_this_layout" ).button();
	$( '.delete' ).each( function( index , el ){
		 var this_el = $( el );
		 this_el.button({
			label: "删除"
		 });
		 this_el.bind( 'click' , function(){
		 	$( "#dialog_message" ).dialog( "destroy" );
			$( "#dialog_message" ).dialog({
				resizable: false,
				height:140,
				modal: true,
				title: "是否确认删除该服务",
				buttons: {
					"确定删除": function() {
						 var product_class_name = this_el.parent().find( '.product_class_name' ).text();
						 $.post( '/admin/ajax_do_delete_product_class/' , { 'product_class_name':product_class_name } ,
                                                        function( res ){
                                                                check_ajax_res_priv_err( res );
                                                                if( res.res == 'TRUE' ){
									this_el.parent().remove();
								}else{
									throw new Error( "删除服务时异常" );
								}
							 } , 'json'
						 )
						$( this ).dialog( "close" );
					},
					"取消": function() {
						$( this ).dialog( "close" );
					}
				}
			});
		 });
	});
	//使能切换 class 可见性按钮
	var enable_toggle_button = function(){ $( '.toggle' ).each( function( index , el ){
		var this_el = $( el );
		var show = 1;
		var this_item_el = this_el.parent();
		if( this_item_el.hasClass( 'notvisible' ) ){
			 label_type = '使该服务在首页可见';
		}else{
			 show = 0;
			 label_type = '使该服务在首页隐藏';
		}
		this_el.button({
			 label:label_type
		});
		this_el.button( 'refresh' );
		this_el.unbind( 'click' );
		this_el.bind( 'click' , function(){
			var product_class_name = this_el.parent().find( '.product_class_name' ).text();
			$.post( '/admin/ajax_toggle_product_class_show/' , { "product_class_name":product_class_name , "show":show } , function( res ){
                                        check_ajax_res_priv_err( res );
                                        if( res.res == "TRUE" ){ 
						 switch( show ){
							 case 0:
								 console.log( 0 )
								 this_item_el.addClass( 'notvisible' );
								 break;
							 case 1:
								 console.log( 1 )
								 this_item_el.removeClass( 'notvisible' );
							 	 break;
							 default:
								 console.log( 3 )
								 throw new Error( '提供的show值无效，应该为0或1' );
						 }
						 this_el.button( 'destroy' );
						 enable_toggle_button();
					}else{
						throw new Error( '改变该分类在首页的可见性时失败' );
					}
				}, "json" );
			});
		 this_el.button( 'refresh' );
		 });
	}
	enable_toggle_button();
	//使能保存按钮
	$( '#save_this_layout' ).click( function(){
		//根据获取 dom 的顺序生成顺序序列
		var new_sort_list = '';
		$( '#product_class .product_class_item' ).each( function( index , el ){
			var this_el = $( el );
			var product_class_name = this_el.find( '.product_class_name' ).text();
			new_sort_list += ( index + '=' + product_class_name + '&&' );
		});
		//post 到服务器
		$.post( "/admin/ajax_do_new_sort_list_product_class/" , 
			 new_sort_list ,
                         function( res ){
                                 check_ajax_res_priv_err( res );
				 if( res.res == "TRUE" ){	 
					//更新成功
				        var dialog_message_el = $( "#dialog_message" );
				        dialog_message_el.text( '设置布局成功.' )
				        dialog_message_el.dialog({
					        modal: true,
					        buttons: {
						        Ok: function() {
					 		        $( this ).dialog( "close" );
					 	}
					 }
                                        });
                                 }else{
                                        throw new Error( "设置布局失败" );
                                 }
			 }
			 , "json"
		);		
	});
	//使能编辑按钮
	$( '.edit' ).each( function( index , el ){
		 var this_el = $( el );
		 this_el.button({
			label: "编辑"
		 });
		 this_el.click( function(){
			 var product_class_name = this_el.parent().find( '.product_class_name' ).text();
			 if( product_class_name == '' ){
				 throw new Error( "当前服务 dom 中没有包含 product_class_name 信息" );
			 }
			 window.location.href = "/admin/product_class/detail?product_class_name=" + product_class_name ;
		 });
	});
})();
</script>





